<template>
	<view class="pupop" v-if="maskCloseAble">
		<view class="popup-box" :animation="animationData">
			<view class="pupop-btn">
				<view @tap="cancel">取消</view>
				<view @tap="confirm" style="color: #2979ff;">确定</view>
			</view>
			<view class="picker-view" style="display: flex;">
				<view class="conmeMens">
					<view class="item" @click="bindChangeIndex(index)" :class="{
						active:provinceIndex==index
					}" v-for="(item,index) in districtMesLIst"  :key="index">{{item.name}}</view>
				</view>
				<view class="conmeMensme">
					<view class="item" :class="{
						active:item.active
					}" @click="xuazheConme(item,index)" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</view>
			</view>
			<picker-view :value="value" v-if="false" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in districtMesLIst" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
				</picker-view-column>
				<picker-view-column v-if="column == 3">
					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	import {
		addressList
	} from './cityData.js'
	export default {
		data() {
			return {
				value: [],
				addressList,
				provinceList: [],
				cityList: [],
				areaList: [],
				itemCimensme:[],
				indicatorStyle: `height: 50px;`,
				provinceIndex: 0,
				cityIndex: 0,
				areaIndex: 0,
				actibeCome:{
					
				},
				animationData: {}
			}
		},
		props: {
			column: {
				type: Number,
				default: 3
			},
			districtMesLIst:{
				default: () => []
			},
			defaultValue: {
				default: () => ''
			},
			visible: {
				type: Boolean,
				default: () => false
			},
			maskCloseAble: {
				type: Boolean,
				default: () => true
			},
		},
		watch: {
			visible (val) {
				if (val) {
					// 每次打开选择器时清理之前的选择状态
					this.actibeCome = {};
					// 清理城市列表的选择状态
					if (this.cityList && this.cityList.length > 0) {
						this.cityList.forEach(city => {
							city.active = false;
						});
					}
				}
				this.changeActive()
			},
			defaultValue() {
			},
			districtMesLIst(){
				this.init()
			},
		},
		created() {
			
		},
		onShow() {
			this.init()
		},
		methods: {
			groupByProvince(data) {
			  return data.reduce((result, item) => {
			    if (!result[item.valu]) {
			      result[item.valu] = [];
			    }
			    result[item.valu].push(item);
			    return result;
			  }, {});
			},
			init () {
				console.log(this.districtMesLIst)
				
				// 清理之前的选择状态
				this.actibeCome = {};
				
				// var provinceList = []
				// console.log(addressList)
				// addressList.filter(item => {
				// 	provinceList.push({
				// 		code: item.code,
				// 		name: item.name
				// 	})
				// })
				this.cityList = this.districtMesLIst[0].children
				
				// 清理城市列表的选择状态
				if (this.cityList && this.cityList.length > 0) {
					this.cityList.forEach(city => {
						city.active = false;
					});
				}
				
				this.areaList = this.districtMesLIst[0].children[0].children
				console.log(this.districtMesLIst[0].children)
				this.changeActive()
				return false;
				// this.provinceList = [...provinceList]
				if (!this.defaultValue ) {
					
				} else {
					var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
					if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
						console.log(this.defaultValue)
						var province = this.defaultValue[0]
						var city = this.defaultValue[1]
						this.provinceIndex = 0
						this.cityIndex = 0
						this.areaIndex = 0
						this.provinceIndex = addressList.findIndex(obj => {
							return obj.name == province
						})
						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
						this.cityList = addressList[this.provinceIndex].children
						this.cityIndex = this.cityList.findIndex(obj => {
							return obj.name == city
						})
						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
						this.areaList = this.cityList[this.cityIndex].children
						if (this.defaultValue.length > 2) {
							this.areaIndex = this.areaList.findIndex(obj => {
								return obj.name == this.defaultValue[2]
							})
						}
						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
						this.$nextTick(() => {
							if (this.column == 3) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
							} else if (this.column == 2) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
							}
						})
					} else if (/^\d{6}$/.test(this.defaultValue)) {
						var province = this.defaultValue.substr(0, 2)
						var city = this.defaultValue.substr(0, 4)
						this.provinceIndex = 0
						this.cityIndex = 0
						this.areaIndex = 0
						this.provinceIndex = addressList.findIndex(obj => {
							return obj.code == province
						})
						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
						this.cityList = addressList[this.provinceIndex].children
						this.cityIndex = this.cityList.findIndex(obj => {
							return obj.code == city
						})
						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
						this.areaList = this.cityList[this.cityIndex].children
						this.areaIndex = this.areaList.findIndex(obj => {
							return obj.code == this.defaultValue
						})
						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
						this.$nextTick(() => {
							if (this.column == 3) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
							} else if (this.column == 2) {
								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
							}
						})
					} else {
						// uni.showToast({
						// 	title: '地区编码格式不正确',
						// 	icon: 'none'
						// })
						// console.log('地区编码格式不正确')
					}
				}
				
			},
			confirm () {
				let confirmDame=[]
				let menVaelue={
					valu:'',
					pinyin:'',
					parent_code:"",
					name:'',
					label:'',
					first:'',
				}
				for(let i in this.actibeCome){
					if(this.actibeCome[i]){
						confirmDame.push(this.actibeCome[i])
					}
				}
				this.$emit('confirm',confirmDame)
			},
			cancel () {
				this.$emit('cancel')
			},
			// 动画
			changeActive () {
				var active = '-315px'
				if (this.visible) {
					active = 0
				}
				var animation = uni.createAnimation({
					duration: 400,
					timingFunction: 'linear'
				})
				animation.bottom(active).step()
				this.animationData = animation.export()
			},
			bindChange(e) {
				console.log(e.detail.value)
				e.detail.value[0] = e.detail.value[0] || 0
				e.detail.value[1] = e.detail.value[1] || 0
				e.detail.value[2] = e.detail.value[2] || 0
				if (e.detail.value[0] != this.provinceIndex) {
					// console.log('监听第一列')
					this.provinceChange(e.detail.value[0])
				} else if (e.detail.value[1] != this.cityIndex) {
					// console.log('监听第二列')
					this.cityChange(e.detail.value[1])
				} else if (e.detail.value[2] != this.areaIndex) {
					// console.log('监听第三列')
					this.areaChange(e.detail.value[2])
				}
			},
			xuazheConme(item,index){
				this.cityList[index].active=!item.active;
				if(this.cityList[index].active){
					this.actibeCome[this.cityList[index].valu]={
						...this.cityList[index],
						children:[],
					}
				}else{
					this.actibeCome[this.cityList[index].valu]="";
				}
				this.cityList=[...this.cityList];
			},
			bindChangeIndex(e){
				this.provinceIndex = e
				this.cityIndex = 0
				this.areaIndex = 0
				this.value = [...[e, 0, 0]]
				
				// 清理之前的选择状态
				this.actibeCome = {};
				
				this.cityList = this.districtMesLIst[e].children
				
				// 添加"全省"选项
				if (this.cityList && this.cityList.length > 0) {
					// 创建一个全省选项，复制省级的数据但修改名称
					const allProvince = {
						name: this.districtMesLIst[e].name + '全省',
						valu: this.districtMesLIst[e].valu + '_all', // 使用特殊值标识全省
						pinyin: this.districtMesLIst[e].pinyin,
						parent_code: this.districtMesLIst[e].parent_code,
						label: this.districtMesLIst[e].name + '全省',
						first: this.districtMesLIst[e].first,
						active: false
					};
					
					// 在城市列表开头添加全省选项
					this.cityList = [allProvince, ...this.cityList];
				}
				
				// 清理所有城市的选择状态
				this.cityList.forEach(city => {
					city.active = false;
				});
				
				this.areaList = this.districtMesLIst[e].children[0].children
			},
			// 监听第一列变化
			provinceChange (e) {
				this.provinceIndex = e
				this.cityIndex = 0
				this.areaIndex = 0
				this.value = [...[e, 0, 0]]
				this.cityList = this.districtMesLIst[e].children
				this.areaList = this.districtMesLIst[e].children[0].children
			},
			// 监听第二列变化
			cityChange (e) {
				this.cityIndex = e
				this.areaIndex = 0
				// console.log(this.cityIndex, this.areaIndex)
				this.value = [...[this.provinceIndex, e, 0]]
				this.cityList = addressList[this.provinceIndex].children
				this.areaList = addressList[this.provinceIndex].children[e].children
			},
			// 监听第三列变化
			areaChange (e) {
				this.areaIndex = e
			},
			// 点击模态框
			close () {
				if (this.maskCloseAble) {
					this.cancel()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.pupop {
		font-family: PingFang SC, PingFang SC;
		
		.popup-box {
			position: fixed;
			left: 0;
			bottom: -315px;
			z-index: 99999;
			background: #fff;
			// padding-bottom: 50px;
			.pupop-btn{
				height: 40px;
				display: flex;
				align-items: center;
				padding: 0 30upx;
				justify-content: space-between;
			}
		}
		.conmeMens{
			width: 380rpx;
			height: 100%;
			overflow: scroll;
			border-right: 1rpx solid #f3f3f3;
			.item{
				border-bottom: 1rpx solid #f3f3f3;
				color: #666666;
			}
			.item.active{
				color: #333333;
			}
		}
		.conmeMensme{
			height: 100%;
			width: 100%;
			text-align: left !important;
			box-sizing: border-box;
			overflow: scroll;
			.item{
				border-bottom: 1rpx solid #f3f3f3;
				padding: 0 20rpx;
				color: #666666;
				text-align: left !important;
			}
			.item.active{
				color: #ff0000;
			}
		}
		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: rgba(0, 0, 0, .5);
		}
		.pupop-models{
			display: none;
		}
		.picker-view {
			width: 750rpx;
			height: 275px;
			border-top: 1rpx solid #f3f3f3;
			margin-top: 20rpx;
		}
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 50px;
		}
	}
</style>
